<template>
  <div class="app">
    <h1>app</h1>
  </div>
  <!-- 设置传统门之后我们的模态框就挂载body上 -->
  <teleport to="body">
    <div v-if="showModal" class="modal">
      <div class="modal-background" @click="closeModal"></div>
      <div class="modal-content">
        <h2>Modal Title</h2>
        <p>Some content goes here...</p>
        <button @click="closeModal">Close Modal</button>
      </div>
    </div>
  </teleport>

  <!-- 可以在这里触发模态框的显示，例如使用按钮 -->
  <button @click="showModal = true">Open Modal</button>
</template>

<script setup>
import { ref } from 'vue'

// 定义一个响应式 ref 用于控制模态框的显示
const showModal = ref(false)

// 定义一个关闭模态框的方法
const closeModal = () => {
  showModal.value = false
}
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  position: relative;
  z-index: 10000;
}

/* 其他样式可以根据需要添加 */
</style>
